<template>
	<view ref="scrollSeamless" class="scroll-seamless" @touchstart="touchstart" @touchmove="touchmove">
		<view
			ref="scrollPanel"
			class="scroll-seamless-panel"
			:style="{ transform: `translateY(${marginTop}px)`, marginLeft: marginLeft + 'px', whiteSpace: needNowrap ? 'nowrap' : '' }"
		>
			<view ref="realRect" class="realRect" :style="{ display: needNowrap ? 'inline-block' : 'block' }">
				<slot></slot>
			</view>
			<view v-if="needSlot" :style="{ display: needNowrap ? 'inline-block' : 'block' }">
				<slot></slot>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		options: {
			type: Object,
			default: function () {
				return {
					// up,down,left,right
					direction: 'up',
					// 滚动速度
					step: 1,
					// 触摸停止滚动
					hoverStop: false
				};
			}
		}
	},
	data() {
		return {
			// 外层容器
			seamLessRect: {},
			// 滚动面板
			scrollPanelRect: {},
			// 数据源高度
			realRect: {},
			// 滚动上边距
			marginTop: 0,
			// 滚动左边距
			marginLeft: 0,
			// 滚动定时器
			timer: null,
			// 是否追加滚动所需内容
			needSlot: false,
			// 是否需要不换行显示
			needNowrap: false,
			// 触摸坐标
			startX: 0,
			startY: 0
		};
	},
	watch: {
		options: {
			deep: true,
			handler(newVal, oldVal) {
				console.log(newVal);
				try {
					clearInterval(this.timer);
					this.timer = null;
				} catch (e) {
					console.log('clearInterval error', e);
					this.timer = null;
				}
				if (newVal.hoverStop) {
					this.startScroll();
				}
			}
		}
	},
	mounted() {
		const query = uni.createSelectorQuery().in(this);
		query
			.select('.scroll-seamless')
			.boundingClientRect()
			.select('.scroll-seamless-panel')
			.boundingClientRect()
			.select('.realRect')
			.boundingClientRect()
			.exec((e) => {
				console.log('获取的dom', e);
				this.seamLessRect = e[0];
				this.scrollPanelRect = e[1];
				this.realRect = e[2];
			});
		if (this.options.hoverStop && !this.timer) {
			this.init();
		}
	},
	methods: {
		init() {
			switch (this.options.direction) {
				case 'up':
					if (this.seamLessRect.height > this.realRect.height) {
						this.needSlot = false;
						return;
					}
					this.scrollUp();
					break;
				case 'down':
					if (this.seamLessRect.height > this.realRect.height) {
						this.needSlot = false;
						return;
					}
					this.marginTop = this.seamLessRect.height - this.scrollPanelRect.height;
					this.scrolldown();
					break;
				case 'left':
					this.needNowrap = true;
					setTimeout(() => {
						if (this.seamLessRect.width > this.realRect.width) {
							this.needSlot = false;
							return;
						}
						this.scrollLeft();
					}, 0);

					break;
				case 'right':
					this.needNowrap = true;
					setTimeout(() => {
						if (this.seamLessRect.width > this.realRect.width) {
							this.needSlot = false;
							return;
						}
						this.marginLeft = this.seamLessRect.width - this.realRect.width * 2;
						this.scrollRight();
					}, 0);
					break;
				default:
					if (this.seamLessRect.height > this.realRect.height) {
						this.needSlot = false;
						return;
					}
					this.scrollUp();
			}
		},
		// 向上滚动
		scrollUp() {
			this.timer = setInterval(() => {
				this.marginTop = this.marginTop - this.options.step;
				if (Math.abs(this.marginTop) >= this.realRect.height) {
					this.marginTop = 0;
				}
			}, 50);
		},
		// 向下滚动
		scrolldown() {
			this.timer = setInterval(() => {
				this.marginTop = this.marginTop + this.options.step;
				if (this.marginTop >= 0) {
					this.marginTop = 0;
				}
				// if (Math.abs(this.marginTop) <= this.realRect.height - this.seamLessRect.height) {
				// 	this.marginTop = this.seamLessRect.height - this.scrollPanelRect.height;
				// }
			}, 50);
		},
		// 向左滚动
		scrollLeft() {
			this.timer = setInterval(() => {
				this.marginLeft = this.marginLeft - this.options.step;
				if (Math.abs(this.marginLeft) >= this.realRect.width) {
					this.marginLeft = 0;
				}
			}, 50);
		},
		// 向右滚动
		scrollRight() {
			this.timer = setInterval(() => {
				this.marginLeft = this.marginLeft + this.options.step;
				if (Math.abs(this.marginLeft) <= this.realRect.width - this.seamLessRect.width) {
					this.marginLeft = this.seamLessRect.width - this.realRect.width * 2;
				}
			}, 50);
		},
		// 停止滚动
		stopScroll() {
			if (this.options.hoverStop && this.timer != null) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		// 继续滚动
		startScroll() {
			console.log('切换的类型', this.options.direction);
			switch (this.options.direction) {
				case 'up':
					if (this.seamLessRect.height > this.realRect.height) return;
					this.scrollUp();
					break;
				case 'down':
					if (this.seamLessRect.height > this.realRect.height) return;
					this.scrolldown();
					break;
				case 'left':
					if (this.seamLessRect.width > this.realRect.width) return;
					this.scrollLeft();
					break;
				case 'right':
					if (this.seamLessRect.width > this.realRect.width) return;
					this.scrollRight();
					break;
				default:
					if (this.seamLessRect.height > this.realRect.height) return;
					this.scrollUp();
			}
		},

		touchstart(e) {
			console.log('触摸开始', e);
			if (!this.options.hoverStop) {
				let x = e.touches[0].pageX;
				let y = e.touches[0].pageY;
				this.startX = x;
				this.startY = y;
			}
		},
		touchmove(e) {
			console.log('触摸中', e);
			if (!this.options.hoverStop) {
				let y = e.touches[0].pageY;
				let deltaY = y - this.startY;
				if (deltaY > 0) {
					this.marginTop = this.marginTop + deltaY;
					console.log('上滑', this.marginTop);
					if (this.marginTop > 0) {
						this.marginTop = 0;
					}
				} else {
					// this.marginTop = this.marginTop - 5;
					this.marginTop = this.marginTop + deltaY;
					console.log('下滑', this.marginTop);
					if (Math.abs(this.marginTop) >= this.realRect.height) {
						this.marginTop = -this.realRect.height + this.seamLessRect.height;
					}
				}
				this.startY = y;
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.scroll-seamless {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;

	.scroll-seamless-panel {
	}
}
</style>
